<template>
  <div class="contract-form">
    <h2>合同信息</h2>
    <el-form label-width="120px" class="form-content">
      <!-- 合同名称 -->
      <el-form-item label="合同名称" required>
        <el-input v-model="form.contractName" placeholder="请输入内容" />
      </el-form-item>

      <!-- 合同类型 -->
      <el-form-item label="合同类型" required>
        <el-select v-model="form.contractType" placeholder="请选择">
          <el-option label="待审核" value="pending" />
          <el-option label="待履行" value="waiting" />
        </el-select>
      </el-form-item>

      <!-- 合同收支类型 -->
      <el-form-item label="合同收支类型" required>
        <el-radio-group v-model="form.paymentType">
          <el-radio label="收款">收款</el-radio>
          <el-radio label="付款">付款</el-radio>
        </el-radio-group>
        <el-input v-model="form.amount" placeholder="请输入金额" class="amount-input" />
      </el-form-item>

      <!-- 甲方 -->
      <el-form-item label="甲方" required>
        <el-select v-model="form.partyA" placeholder="请输入类型">
          <el-option label="Company A" value="companyA" />
          <el-option label="Company B" value="companyB" />
          <el-option label="Company C" value="companyC" />
        </el-select>
      </el-form-item>

      <!-- 乙方 -->
      <el-form-item label="乙方" required>
        <el-select v-model="form.partyB" placeholder="请输入类型">
          <el-option label="Company A" value="companyA" />
          <el-option label="Company B" value="companyB" />
          <el-option label="Company C" value="companyC" />
        </el-select>
      </el-form-item>

      <!-- 合同签订日期 -->
      <el-form-item label="合同签订日期" required>
        <el-date-picker
          v-model="form.signDate"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
        />
      </el-form-item>

      <!-- 合同生效日期 -->
      <el-form-item label="合同生效日期" required>
        <el-date-picker
          v-model="form.effectiveDate"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
        />
      </el-form-item>

      <!-- 合同结束日期 -->
      <el-form-item label="合同结束日期" required>
        <el-date-picker
          v-model="form.endDate"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
        />
      </el-form-item>

      <!-- 上传文件 -->
      <el-form-item label="上传文件">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :file-list="form.fileList"
          @update:file-list="val => form.fileList = val"
        >
          <template #trigger>
            <el-button type="primary">上传合同</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">
              请上传pdf文件，不超过50M以内
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <!-- 组织架构 -->
      <el-form-item label="组织架构">
        <div class="org-structure">
          <el-checkbox v-model="form.selectAll" @change="handleSelectAll">全选</el-checkbox>
          <div class="department">
            <div class="dept-item">
              <el-checkbox v-model="form.departments.tech.selected">技术部</el-checkbox>
              <span class="member-count">3人</span>
              <el-button link type="primary" @click="form.departments.tech.expanded = !form.departments.tech.expanded">
                {{ form.departments.tech.expanded ? '收起' : '展开' }}
              </el-button>
            </div>
            <div class="dept-item">
              <el-checkbox v-model="form.departments.business.selected">商务部</el-checkbox>
              <span class="member-count">3人</span>
              <el-button link type="primary" @click="form.departments.business.expanded = !form.departments.business.expanded">
                {{ form.departments.business.expanded ? '收起' : '展开' }}
              </el-button>
              <div class="sub-members" v-if="form.departments.business.expanded">
                <el-checkbox v-model="form.departments.business.members.wang">王小花</el-checkbox>
                <el-checkbox v-model="form.departments.business.members.zhang">张则牛</el-checkbox>
                <el-checkbox v-model="form.departments.business.members.sun">孙小猪</el-checkbox>
              </div>
            </div>
            <div class="dept-item">
              <el-checkbox v-model="form.departments.design.selected">设计部</el-checkbox>
              <span class="member-count">3人</span>
              <el-button link type="primary" @click="form.departments.design.expanded = !form.departments.design.expanded">
                {{ form.departments.design.expanded ? '收起' : '展开' }}
              </el-button>
            </div>
            <div class="dept-item">
              <el-checkbox v-model="form.departments.admin.selected">行政部</el-checkbox>
              <span class="member-count">3人</span>
              <el-button link type="primary" @click="form.departments.admin.expanded = !form.departments.admin.expanded">
                {{ form.departments.admin.expanded ? '收起' : '展开' }}
              </el-button>
            </div>
            <div class="dept-item">
              <el-checkbox v-model="form.departments.package.selected">包办部</el-checkbox>
              <span class="member-count">3人</span>
              <el-button link type="primary" @click="form.departments.package.expanded = !form.departments.package.expanded">
                {{ form.departments.package.expanded ? '收起' : '展开' }}
              </el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const form = reactive({
  contractName: '',
  contractType: '',
  paymentType: '',
  amount: '',
  partyA: '',
  partyB: '',
  signDate: '',
  effectiveDate: '',
  endDate: '',
  fileList: [],
  selectAll: false,
  departments: {
    tech: { selected: false, expanded: false },
    business: { 
      selected: false, 
      expanded: false,
      members: {
        wang: false,
        zhang: false,
        sun: false
      }
    },
    design: { selected: false, expanded: false },
    admin: { selected: false, expanded: false },
    package: { selected: false, expanded: false }
  }
})

const handleSelectAll = (val) => {
  Object.keys(form.departments).forEach(key => {
    form.departments[key].selected = val
    if (key === 'business') {
      Object.keys(form.departments[key].members).forEach(memberKey => {
        form.departments[key].members[memberKey] = val
      })
    }
  })
}
</script>

<style scoped>
.contract-form {
  padding: 24px;
  background-color: #fff;
  border-radius: 4px;
}

.form-content {
  max-width: 800px;
  margin-top: 20px;
}

.amount-input {
  width: 200px;
  margin-left: 20px;
}

.org-structure {
  margin-top: 10px;
}

.department {
  margin-top: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.dept-item {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

.dept-item:last-child {
  border-bottom: none;
}

.member-count {
  color: #909399;
  margin: 0 12px;
  font-size: 12px;
}

.sub-members {
  margin-top: 12px;
  padding-left: 24px;
  display: flex;
  gap: 24px;
}

:deep(.el-upload__tip) {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}
</style> 